@extends('Layout/personBase')

@section('title', '地址管理')

@section('css')
		
		<link href="{{asset('Home/css/addstyle.css')}}" rel="stylesheet" type="text/css">

@endsection
				
@section('right')


	
	<div class="user-address">
		<!--标题 -->
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
		</div>
		<hr/>
		<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
		@foreach ($ress as $v)
			<li class="user-addresslist">
				<p class="new-tit new-p-re">
					<span class="new-txt">{{$v->linkman}}</span>
					<span class="new-txt-rd2">{{$v->telephone}}</span>
				</p>
				<div class="new-mu_l2a new-p-re">
					<p class="new-mu_l2cw">
						<span class="title">地址：</span>
						<span class="province">{{$v->province}}</span>
						<span class="city">{{$v->city}}</span>
						<span class="dist">{{$v->town}}</span>
						<span class="street">{{$v->dec}}</span></p>
				</div>
				<div class="new-addr-btn">
					<a href="{{url('/Home/modifyAddress')}}/{{$v->id}}"><i class="am-icon-edit"></i>编辑</a>
					<span class="new-addr-bar">|</span>
					<a href="{{url('/Home/deleteAddress')}}/{{$v->id}}" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
				</div>
			</li>
		@endforeach
		</ul>
		<div class="clear"></div>
		<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
		<!--例子-->
		<div class="am-modal am-modal-no-btn" id="doc-modal-1">

			<div class="add-dress">

				<!--标题 -->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
				</div>
				<hr/>

				<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
					<form class="am-form am-form-horizontal" action="{{url('/Home/addAddress')}}" method="post">
						{{csrf_field()}}
						<div class="am-form-group">
							<label for="user-name" class="am-form-label">收货人</label>
							<div class="am-form-content">
								<input type="text" id="user-name" name="linkman" placeholder="收货人">
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-phone" class="am-form-label">手机号码</label>
							<div class="am-form-content">
								<input id="user-phone" name="telephone" placeholder="手机号必填" type="text">
							</div>
						</div>
						<div class="am-form-group">
							<label for="user-address" class="am-form-label">所在地</label>
							<div id="show">
							<div class="am-form-content address">
							<div class="form address" style="height: 27px;width:600px;padding-top: 5px;display: inline-block;">
								<select style="width:120px;" id="pro" name="pro">
									<option value="-1">--请选择省份--</option>
								</select>
								<select style="width:120px;" id="city" name="city">
									<option value="-1">--请选择城市--</option>
								</select>
								<select style="width:120px;" id="area" name="area">
									<option value="-1">--请选择区/县--</option>
								</select>
							</div>
							</div>
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-intro" class="am-form-label">详细地址</label>
							<div class="am-form-content">
								<textarea class="" rows="3" id="user-intro" name="dec" placeholder="输入详细地址"></textarea>
								<small>100字以内写出你的详细地址...</small>
							</div>
						</div>

						<div class="am-form-group">
							<div class="am-u-sm-9 am-u-sm-push-3">
								<button class="am-btn am-btn-danger">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

@endsection

@section('bottom-js')

	<script type="text/javascript">
		$(document).ready(function() {							
			$(".new-option-r").click(function() {
				$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
			});
			
			var $ww = $(window).width();
			if($ww>640) {
				$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
			}
			
		})
	</script>

	<div class="clear"></div>




<script>
{{-- 城市三级联动 --}}

	$.post(
		"/shop/area",
		{'upid': '0', '_token': '{{ csrf_token() }}'},
		function (msg) {

			var str = '';
			for (var i=0; i < msg.data.length; i++) {
				str += '<option value="' + msg.data[i].id + '">' + msg.data[i].name + '</option>';
			}
			$('#pro').append(str);
		},
		'json'
	);


		$('div#show').on('change', 'select', function () {
			var that = $(this);
			if ($('#pro').val() < 0) {
				$('#city').empty();
				$('#city').append("<option value='-1'>--请选择城市--</option>");
				$('#area').empty();
				$('#area').append("<option value='-1'>--请选择区/县--</option>");
				return false;
			}
			if (that.attr('name') != "area") {
				that.next('select')[0].options.length = 0;
			}
				
			if ($('#city').val() < 0 ) {
				$('#area').empty();
				$('#area').append("<option value='-1'>--请选择区/县--</option>");
			}

			var currentId = $(this).val();

			// console.log(currentId);

			$.post(
				'/shop/area',
				{'upid': currentId, '_token': '{{ csrf_token() }}'},
				function (msg) {
					var str = '';
						// console.log(msg);
					for (var i = 0; i < msg.data.length; i++) {

						str += '<option value="'+msg.data[i].id+'">'+msg.data[i].name+'</option>';
					}
					if (that.attr('name') == 'pro') {
						that.next('select').append("<option value='-1'>--请选择城市--</option>");
					}
					that.next('select').append(str);
				},
				'json',
				
			);
			if (that.attr('name') == 'pro') {
				$('#area').empty();
				$('#area').append("<option value='-1'>--请选择区/县--</option>");
			}
		})
</script>

@if (count($errors) > 0)
    @foreach ($errors->all() as $error)
        <script>
			alert("{{$error}}");
	 		</script>
    @endforeach
@endif

@if (session('errorTip'))
    <script>
        alert("{{ session('errorTip') }}");
    </script>
@endif
@endsection
